<template>
  <a-card :bordered="false" style="height: calc(100vh - 305px)">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleShowFilter" icon="filter" style="margin-right: 10px">
        筛选 <span style="color: #1890ff; margin-left: 5px">{{ searchNum }}</span></a-button
      >
      <a-button @click="showColumn" icon="unordered-list" style="margin-right: 10px"> 设置列 </a-button>
      <!-- <a-button @click="handleAdd" type="primary" style="float: right" icon="plus">新建</a-button> -->
    </div>
    <!-- 设置列 -->
    <SetColumn
      columnName="设置列"
      ref="SetColumn"
      v-if="showSetColumn"
      @sureBtn="sureBtn"
      @cancelBtn="showSetColumn = false"
    />
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :key="tableKey"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :scroll="{ x: computedX, y: 'calc(100vh - 420px)' }"
        :components="drag(columns, 'PRO_ORDER_LIST_WAIT_LIST')"
      >
        <!-- title搜索条件开始 -->
        <!-- 输入框搜索 -->
        <template :slot="item.scopedSlots.filterDropdown" slot-scope="{ column }">
          <div v-for="(item, i) in filterDropdownList" :key="i" style="display: flex; padding: 8px">
            <a-input
              v-if="item.scopedSlots.filterDropdown === 'searchDropdown'"
              :placeholder="'请输入'[column.title]"
              v-model="queryParam[column.searchIndex]"
              style="width: 188px"
            />
            <a-select
              :mode="column.multi ? 'multiple' : 'default'"
              v-if="item.scopedSlots.filterDropdown === 'selectDropdown'"
              :placeholder="'请选择'[column.title]"
              allowClear
              style="width: 188px"
              v-model="queryParam[`${column.searchIndex}all`]"
              @change="(a) => changeSelect(a, column.searchIndex)"
              :labelInValue="true"
            >
              <a-select-option v-for="(items, i) in column.options" :key="i" :value="items.key">{{
                items.label
              }}</a-select-option>
            </a-select>
            <a-range-picker
              v-if="item.scopedSlots.filterDropdown === 'datePicker'"
              style="width: 350px"
              v-model="dateForm[column.searchIndex]"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始时间', '结束时间']"
              @change="(a, b) => onOk(a, b, column.searchIndex)"
              show-time
            />
            <j-select-user-by-dep
              v-if="item.scopedSlots.filterDropdown === 'selectPeople'"
              v-model="queryParam[`${column.searchIndex}username`]"
              :multi="column.multi"
              @changeRow="(a, b, c) => onChangeUser(b || {}, column.searchIndex)"
            ></j-select-user-by-dep>
            <a-button type="primary" style="width: 80px; margin-left: 20px" @click="searchQuery"> 搜索 </a-button>
          </div>
        </template>
        <a-icon
          slot="searchIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <!-- title搜索条件结束 -->
        <span slot="actions" slot-scope="text, record">
          <a @click="distribute(record)">派发至车间</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 底部分页 -->
    <div
      :style="{
        position: 'fixed',
        bottom: 0,
        right: 0,
        zIndex: 2,
        width: '100%',
        background: '#fff',
        padding: '24px',
      }"
    >
      <div style="display: inline-block; float: right">
        <a-pagination
          :total="ipagination.total"
          v-model="ipagination.current"
          :page-size-options="ipagination.pageSizeOptions"
          :page-size="ipagination.pageSize"
          @change="onChangePage"
          @showSizeChange="onChangePage"
          show-quick-jumper
          show-size-changer
        />
      </div>
    </div>
    <!-- 侧边筛选 -->
    <a-drawer
      width="500"
      height="100vh"
      :bodyStyle="{ background: '#f5f5f5', padding: '0' }"
      :closable="true"
      :visible="showFilter"
      @close="showFilter = false"
    >
      <formSearch ref="dataSearch" @searchDate="searchDate" />
    </a-drawer>
    <!-- 派发至车间弹窗 -->
    <a-modal title="全部人员" :visible="distributeVisible" @cancel="distributeVisible = false" @ok="distributeOk">
      <div>
        <a-form layout="inline">
          <a-form-item label="生产负责人" required>
            <j-select-user-by-dep
              v-model="formData.chargeUserIdname"
              :multi="false"
              style="width: 360px"
              @changeRow="(a, b, c) => ChangeUser(b[0] || {})"
            ></j-select-user-by-dep>
          </a-form-item>
          <a-form-item label="工艺路线" required style="margin-top: 10px">
            <a-select
              placeholder="请选择工艺路线"
              allowClear
              style="width: 360px; margin-left: 14px"
              v-model="formData.processRouteId"
            >
              <a-select-option v-for="(item, i) in options" :key="i" :value="item.id">{{
                item.craftName
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <template slot="footer">
        <a-button key="back" @click="distributeVisible = false"> 取消 </a-button>
        <a-button key="submit" type="primary" :loading="loadings" @click="distributeOk"> 确定 </a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { tableMixin } from '@/mixins/tableMixin'
import tableDragResize from '@/mixins/tableDragResize'
import { columns, allColumn } from './columna.js'
import { getAction, postAction } from '../../../../api/manage.js'
const actionArr = [
  {
    fixed: 'right',
    title: '操作',
    align: 'center',
    dataIndex: 'actions',
    ellipsis: true,
    width: 120,
    scopedSlots: { customRender: 'actions' },
  },
]
export default {
  mixins: [tableMixin, tableDragResize],
  components: {},
  data() {
    return {
      loadings: false,
      // 表头
      columns: columns,
      actionArr,
      allColumn: allColumn,
      url: {
        list: '/planmgt/erpProductOrder/list?status=0',
      },
      //······
      distributeVisible: false,
      formData: {},
      options: [],
      EntityName: this.BUSI_CONST.Entity.PRO_ORDER_LIST_WAIT_LIST, //用于表头设计,值保证是唯一的即可
      tableKey: 1.9,
    }
  },
  computed: {},
  methods: {
    distribute(e) {
      console.log(e, '111')
      this.formData = {
        id: e.id,
      }
      getAction('/planmgt/erpProductOrder/getProcessRouteByGoodsId', { goodsId: e.goodsId }).then((res) => {
        console.log(res, 'res')
        this.options = res.result
      })
      this.distributeVisible = true
    },
    ChangeUser(v) {
      console.log(v)
      this.formData.chargeUserId = v.id
    },
    distributeOk() {
      const { chargeUserId, id, processRouteId } = this.formData
      if (!chargeUserId) {
        return this.$antdMessage.warning('请选择生产负责人')
      }
      if (!processRouteId) {
        return this.$antdMessage.warning('请选择工艺路线')
      }
      let par = {
        chargeUserId,
        id,
        processRouteId,
      }
      console.log(this.formData, par, 'fff')
      this.loadings = true
      postAction('/planmgt/erpProductOrder/distribute', par).then((res) => {
        if (res.code === 200) {
          this.$antdMessage.success(res.message)
          this.distributeVisible = false
          this.loadData(1)
        } else {
          this.$antdMessage.error(res.message)
        }
        this.loadings = false
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
@import '~@/assets/less/public.less';
</style>
